<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- Mobiscroll CSS Includes -->
    <link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.icons.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.frame.android-holo.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.frame.ios.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.frame.jqm.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.frame.wp.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.android-holo.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.jqm.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.wp.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.image.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.android-holo-light.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.wp-light.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.mobiscroll-dark.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    /* Demo Page styling, you can disregard this in your implementation */
    
    body {
        padding: 1em;
        margin: 0;
        font-size: 16px;
        font-family: arial, verdana, sans-serif;
    }
    
    input,
    select {
        width: 100%;
        padding: .625em;
        margin: 0 0 .625em 0;
        border: 1px solid #aaa;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    </style>
</head>

<body>
    <!-- Demo configurator markup START, disregard this in your implementation -->
    <div>
        <label for="theme">Theme</label>
        <select name="theme" id="theme" class="settings">
            <option value="">Mobiscroll</option>
            <option value="mobiscroll-dark">Mobiscroll Dark</option>
            <option value="android-holo">Android Holo</option>
            <option value="android-holo-light">Android Holo Light</option>
            <option value="ios">iOS</option>
            <option value="wp">Windows Phone</option>
            <option value="wp-light">Windows Phone Light</option>
        </select>
    </div>
    <div>
        <label for="display">Display</label>
        <select name="display" id="display" class="settings">
            <option value="center">Center</option>
            <option value="inline">Inline</option>
            <option value="bubble">Bubble</option>
            <option value="top">Top</option>
            <option value="bottom">Bottom</option>
        </select>
    </div>
    <div>
        <label for="language">Language</label>
        <select name="language" id="language" class="settings">
            <option value="cs">Cestina</option>
            <option value="zh">Chinese</option>
            <option value="de">Deutsch</option>
            <option value="en" selected>English</option>
            <option value="en-UK">English (UK)</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
            <option value="it">Italiano</option>
            <option value="ja">Japanese</option>
            <option value="hu">Magyar</option>
            <option value="nl">Nederlands</option>
            <option value="no">Norsk</option>
            <option value="pl">Polski</option>
            <option value="pt-PT">Português Europeu</option>
            <option value="pt-BR">Pt. Brasileiro</option>
            <option value="ro">Româna</option>
            <option value="sk">Slovencina</option>
            <option value="sv">Svenska</option>
            <option value="tr">Türkçe</option>
            <option value="ru">Русский</option>
            <option value="ru-UA">Русский (UA)</option>
            <option value="fa">فارسی</option>
        </select>
    </div>
    <!-- Demo configurator markup END -->

    <label>
        Test
        <input id="test" />
    </label>

    <!-- Mobiscroll JS Includes -->
    <script src="js/mobiscroll.dom.js"></script>
    <script src="js/mobiscroll.core.js"></script>
    <script src="js/mobiscroll.scrollview.js"></script>
    <script src="js/mobiscroll.frame.js"></script>
    <script src="js/mobiscroll.frame.android-holo.js"></script>
    <script src="js/mobiscroll.frame.ios.js"></script>
    <script src="js/mobiscroll.frame.jqm.js"></script>
    <script src="js/mobiscroll.frame.wp.js"></script>
    <script src="js/mobiscroll.scroller.js"></script>
    <script src="js/mobiscroll.android-holo-light.js"></script>
    <script src="js/mobiscroll.wp-light.js"></script>
    <script src="js/mobiscroll.mobiscroll-dark.js"></script>

    <script src="js/i18n/mobiscroll.i18n.cs.js"></script>
    <script src="js/i18n/mobiscroll.i18n.de.js"></script>
    <script src="js/i18n/mobiscroll.i18n.en-UK.js"></script>
    <script src="js/i18n/mobiscroll.i18n.es.js"></script>
    <script src="js/i18n/mobiscroll.i18n.fa.js"></script>
    <script src="js/i18n/mobiscroll.i18n.fr.js"></script>
    <script src="js/i18n/mobiscroll.i18n.hu.js"></script>
    <script src="js/i18n/mobiscroll.i18n.it.js"></script>
    <script src="js/i18n/mobiscroll.i18n.ja.js"></script>
    <script src="js/i18n/mobiscroll.i18n.nl.js"></script>
    <script src="js/i18n/mobiscroll.i18n.no.js"></script>
    <script src="js/i18n/mobiscroll.i18n.pl.js"></script>
    <script src="js/i18n/mobiscroll.i18n.pt-BR.js"></script>
    <script src="js/i18n/mobiscroll.i18n.pt-PT.js"></script>
    <script src="js/i18n/mobiscroll.i18n.ro.js"></script>
    <script src="js/i18n/mobiscroll.i18n.ru.js"></script>
    <script src="js/i18n/mobiscroll.i18n.ru-UA.js"></script>
    <script src="js/i18n/mobiscroll.i18n.sk.js"></script>
    <script src="js/i18n/mobiscroll.i18n.sv.js"></script>
    <script src="js/i18n/mobiscroll.i18n.tr.js"></script>
    <script src="js/i18n/mobiscroll.i18n.zh.js"></script>

    <script>
    (function ($) {

        function init() {

            mobiscroll.scroller('#test', {
                theme: theme,
                display: display,
                lang: lang,
                wheels: [
                    [{
                        label: 'First wheel',
                        data: ['0', '1', '2', '3', '4', '5', '6', '7']
                    }, {
                        label: 'Second wheel',
                        data: [{
                            value: 0,
                            display: 'a'
                        }, {
                            value: 1,
                            display: 'b'
                        }, {
                            value: 2,
                            display: 'c'
                        }, {
                            value: 3,
                            display: 'd'
                        }]
                    }]
                ]
            });
        }

        // -------------------------------------------------------------------
        // Demo page code START, you can disregard this in your implementation
        var theme, display, lang;

        $('.settings').on('change', function () {
            theme = $('#theme').val() || mobiscroll.settings.theme;
            display = $('#display').val();
            lang = $('#language').val();

            init();
        });

        $('#theme').trigger('change');
        // Demo page code END
        // -------------------------------------------------------------------
    })(mobiscroll.$);
    </script>
</body>

</html>
